<template>
  <div>
    <Row>
      <Col span="6" offset="9">
        <!-- <div class="content">
             <div class="register-body">
                 <
                 <H1 class="h2-size">欢迎加入坚磐众测</H1>
             </div>
          </div>-->
        <div style="background:#eee;margin-top:100px;">
          <Card class="register-body">
            <h1 class="h1-size"> 欢迎登录</h1>
            <Form class="form-style" ref="formValidate" :model="formValidate" :rules="ruleValidate">

              <FormItem  prop="email">
                <Input v-model="formValidate.email" prefix="ios-contact" placeholder="邮箱" ></Input>
              </FormItem>
              <FormItem  prop="password" >
                <Input  prefix="ios-contact" v-model="formValidate.password" type="password" placeholder="密码" ></Input>
              </FormItem>
              <Button type="primary" :loading="loading2" size="large" @click="toLoading2('formValidate')" >
                <span v-if="!loading2">登录</span>
                <span v-else>Loading...</span>
              </Button>
            </Form>
          </Card>
        </div>
      </Col>

    </Row>
  </div>
</template>
<script>
  import Cookie from 'js-cookie';
  import  qs from 'qs'
  export default {
    created(){

    },
    data () {

      return {
        loading: false,
        loading2: false,
        formValidate: {
          email:'',
          password:'',

        },
        ruleValidate: {
          email:[
            {required:true,message:'请填写邮箱'},
            {type:'email',message:'请输入正确的邮箱号'}
          ],
          password:[
            {required:true,message:'请填写密码'}
          ],

        }
      }
    },
    methods: {
      toLoading () {


      },

      toLoading2 (name) {
        this.loading2 = true;
        this.$refs[name].validate((valid) => {
          if (valid) {
            const login= this.$axios.$post('/api/login',qs.stringify(this.formValidate));
            login.then(res=>{
              Cookie.set('token',res.access_token)
              this.$store.dispatch('user/getUser');
              this.loading2=false;
            this.$router.push('/');
            }).catch(error=>{
              this.$Message.error(error.error)
            })
          } else {
         //   this.$Message.error('注册失败');
            this.loading2=false;

          }
        })

      }
    }
  }
</script>

<style scope="this api replaced by slot-scope in 2.5.0+">
  .content{
    height: 900px;
  }

  .register-body{
    margin-top: 100px;
    background: #fff;
    height: 500px;

    text-align: center;
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
  }
  .form-style{
    margin-top: 70px;
  }
</style>
